@import "../oban";


.oban-defaults();
.fluid-grid12 {
  .oban-grid-fluid();
}
/*.oban-grid-debug();*/

.grid-border {
  .oban-grid-border(#000);
}

.grid-fixed {
  .oban-grid-fixed(300px);
}

.grid-fixed-right {
  .oban-grid-fixed-right(300px);
}

.grid-fixed-both {
  .oban-grid-fixed-left(@columnSize: 200px, @className: column-left);
  .oban-grid-fixed-right(@columnSize: 200px, @className: column-right);
}

.oban-typography();

.oban-messages();

.clearfix {
  .oban-clearfix();
}

.reset {
  .oban-reset();
}

//Buttons
.btn {
  .oban-button-reset();
}

.btn-flat {
  .oban-button-flat();
}

.btn-gradient {
  .oban-button-gradient();
}

//Modal
.modal {
  .oban-modal();
}
.modal-backdrop {
  .oban-modal-backdrop();
}

//Arrows
.arrow-top {
  .oban-arrow-top(#ccc);
}

.arrow-right {
  .oban-arrow-right(#ccc);
}

.arrow-left {
  .oban-arrow-left(#ccc);
}

.arrow-bottom {
  .oban-arrow-bottom(#ccc);
}

.arrow-border-top {
  border: 1px solid #000;
  .oban-arrow-top(@color: #ccc, @border: #000, @border-width: 1px);
}

.arrow-border-right {
  border: 1px solid #000;
  .oban-arrow-right(#ccc, @border: #000, @border-width: 1px);
}

.arrow-border-left {
  border: 1px solid #000;
  .oban-arrow-left(#ccc, @border: #000, @border-width: 1px);
}

.arrow-border-bottom {
  border: 1px solid #000;
  .oban-arrow-bottom(#ccc, @border: #000, @border-width: 1px);
}


.size-test1 {
  .oban-size(50px, 50px);
}
.size-test2 {
  .oban-size(50px);
}

.bar {
  .oban-bar(#336699, #fff, 50px, 20px, 10);
}

.tabs {
  .oban-tabs();
}

.warning,
.success,
.error {
  line-height: 30px;
}

.warning {
  background: @oban-warning-bg;
  color: @oban-warning;
}
.error {
  background: @oban-error-bg;
  color: @oban-error;
}
.success {
  background: @oban-success-bg;
  color: @oban-success;
}

.form {
  .oban-form(
  );
}

.grid {
  .fluid-grid12 {
    margin-top: 20px;
    margin-bottom: 20px;
  }
  .column-fixed div,
  div[class^=column] .name { 
    padding: 10px 0;
    background: #ddd;
    border-radius: 5px;
    text-align: center;
  }
  div[class^=column] div[class^=column] .name {
    background: #bbb;
  }
  #wrapper {
    width: 900px;
    padding: 10px 0;
    margin: 0 auto;
    background: #f0f0f0;
  }

  .btns {
    margin: 0 0 10px 10px;
  }
}

.mobile {
  .block {
    border: 1px solid #ccc;
    border-radius: 5px;
    width: 200px;
    text-align: center;
    margin: 10px 0;
  }
  .block span {
    display: block;
    padding: 10px;
  }

  .visible [class*=show],
  .hidden [class*=hide] {
    color: @oban-success;
    background: @oban-success-bg;
  }
  .oban-responsive();

}


.responsive {
  margin: 0;
  padding: 0;
  div {
    width: 100%;
    height: 500px;
    &:after {
      color: #fff;
      font-size: 30px;
    }
  }

  .oban-respond-to(large, {
    div {
      background: green;
      &:after {
        content: 'Large';
      }
    }
  });

  .oban-respond-to(medium, {
    div {
      background: orange;
      &:after {
        content: 'Medium';
      }
    }
  });

  .oban-respond-to(small, {
    div {
      background: yellow;
      &:after {
        content: 'Small';
      }
    }
  });

  .oban-respond-to(tiny, {
    div {
      background: red;
      &:after {
        content: 'Tiny';
      }
    }
  });

}

.image-fit {
  .oban-image-fit();
}

@font-weights: '400','600';
.oban-google-font('Open Sans', @font-weights);
.google-font {
  font-family: 'Open Sans';
}
